<template>
  <el-container
    v-if="showMain"
    style="padding:0px;position:absolute;right:15%;left:15%;width: 70%;height: 100%;background-color:#ffffff;"
  >
    <el-main style="padding:0px;padding-right:20px;">
      <el-tabs
        v-model="activetab.name"
        @tab-click="getsec"
      >
        <el-tab-pane
          v-for="(item) in sections"
          :key="item.sid"
          :name="item.sid+''"
          :label="item.sectionName"
        ><span
            slot="label"
            style="font-size:13px;"
          ><i class="el-icon-collection"></i> {{item.sectionName}}
          </span>
          <el-card
            :body-style="{ padding: '8px' }"
            shadow="always"
            v-for="(item2) in section.threads"
            :key="item2.tid"
            style="padding-bottom:5px;"
          >
            <div slot="header">
              <el-button
                type="text"
                style="font-size:25px; font-weight:bold; color:black;"
                :underline="false"
                @click="openDetails(item2.tid)"
              >{{item2.title}}</el-button>
              <div>
                <el-tag
                  effect="dark"
                  type="success"
                >提问者</el-tag> {{item2.author.username}} --- {{item2.postTime | ellipsis}}
              </div>
              <p v-if="item2.dialogVisible">
                {{item2.content.replies[0].replyContent}}
                <el-image
                  v-show="item2.content.replies[0].url !== ''"
                  style="display: block;margin: auto;width: 80%;padding-top:10px;"
                  :src="item2.content.replies[0].url"
                  :preview-src-list="[item2.content.replies[0].url]"
                  fit="scale-down"
                ></el-image>
              </p>
            </div>
            <el-button
              type="text"
              class="el-icon-view"
              style="font-size:16px; color:green;float:right;"
              v-if="!item2.dialogVisible"
              @click="getthr(item2)"
            > 预览</el-button>
            <el-button
              type="text"
              class="el-icon-view"
              style="font-size:16px; color:green;float:right;"
              v-else
              @click="item2.dialogVisible = false"
            > 收起预览</el-button>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <el-aside style="padding-left:5px;border-left: 1px solid #e1e2e5;">
      <Hotquestion></Hotquestion>
    </el-aside>
  </el-container>
</template>

<script>
import { request } from 'network/request'
import Hotquestion from 'components/content/question/Hotquestion'
export default {
  name: 'Questionset',
  components: {
    Hotquestion
  },
  data () {
    return {
      showMain: false,
      activetab: {
        name: 0
      },
      sections: [],
      section: {}
    }
  },
  mounted () {
    request({
      url: '/section',
      method: 'get'
    }).then((res) => {
      // console.log(res.status);
      // console.log(res.data);
      this.sections = res.data.sections
      this.activetab.name = this.sections[0].sid + ''
      // console.log(this.activetab)
      this.getsec(this.activetab)
    })
  },
  methods: {
    openDetails (tid) {
      this.$router.push({
        path: '/answer_sheet', // 页面路劲 和上面名字任意一个都可以
        query: { id: JSON.stringify(tid) } // 参数传值
      })
    },
    getthr (item2) {
      console.log(item2)
      request({
        url: '/thread/' + item2.tid,
        method: 'get'
      }).then((res) => {
        // console.log(res.data);
        item2.content = res.data.thread
        item2.content.replies.forEach((res) => {
          this.$set(res, 'url', res.replyContent.substring(res.replyContent.lastIndexOf('@#@') + 3))
          res.replyContent = res.replyContent.substring(0, res.replyContent.lastIndexOf('@#@'))
        })
        item2.dialogVisible = true
        // console.log(this.question);
      })
    },
    getsec (tab) {
      // console.log(tab);
      request({
        url: '/section/' + tab.name,
        method: 'get'
      }).then((res) => {
        // console.log(res.status);
        // console.log(res.data);
        this.section = res.data.section
        this.section.threads.forEach((res) => {
          this.$set(res, 'dialogVisible', false)
          this.$set(res, 'content', {})
        })
        this.showMain = true
      })
    }
  },
  filters: {
    ellipsis (value) {
      return value.slice(0, 10) + ' ' + value.slice(11, 19)
    }
  }
}
</script>

<style lang='less' scoped>
</style>
